<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script> <!-- vue引入 -->
    <script type="text/javascript">
        Vue.config.productionTip=false; //阻止vue在启动时产生提示
        const vm = new Vue({
            //el:'#container',
            data: {},
            methods: { //设置函数块
                showInfo1(e){//定义函数为事件调用
                    console.log(e.key,e.keyCode);
                }
            }
        });
        
        window.onload = function() { //页面加载完成在加载该方法
            vm.$mount('#container');
        }
    </script>
</head>
<body>
    <!-- 
        @keyup(键盘松开触发),@keydown(键盘按下触发)
        1. Vue 中常用的按键别名：
            回车触发：enter,  实列：@keyup.enter="showInfo1($event)"
            删除：delete(捕获“删除”和“后退”健)
            esc健触发：esc 
            空格健触发：space 
            tab健触发：tab 必须配合这@keydown按下触发使用、实列：@keydown.tab="showInfo1($event)
            切换大小写：caps-lock 出现驼峰命名的必须用中划线分割、实列：@keydown.caps-lock="showInfo1($event)
            上:up, 下:down, 左:left, 右:right

        2. Vue 未提供别名的按键，可以使用按键原始的key取绑定，但要注意key如果是驼峰命名的必须用中划线分割、如CapsLock要写成：caps-lock

        3. 系统修饰符(用法特殊): ctrl、alt、shift、meta
            (1).配合keyup使用：按下修饰符建的同时,再按下其他建、随后释放其他建即可触发事件
                如：指定组合键触发、如：@keyup.ctrl.y 只有ctrl + y会触发
            (2).配合keydown使用：正常触发事件
        
        4. 也可以使用keyCode去指定具体的按键(不推荐)、因为不同键盘keyCode不一定会一样
        5. 自定义键盘事件：Vue.config.keyCodes.别名=键值keyCode (不推荐)
    -->
    <div id="container">
        <input type="text" placeholder="键盘松开触发" @keyup="showInfo1($event)">
        <input type="text" placeholder="键盘按下触发" @keydown="showInfo1($event)">
        <input type="text" placeholder="键盘指定健触发测试" @keyup.ctrl.y ="showInfo1($event)">
    </div>
</body>
</html>